<template>
  <view style="background-image: url('/static/background/back4.jpg')" class="container">
    <view class="my-container">
      <!-- 用户信息栏（点击跳转个人信息） -->
      <view class="user-info" @click="handleUserInfoClick">
        <!-- 未登录显示默认头像，登录后显示后端获取的头像 -->
        <image 
          :src="isLogin ? (userInfo.avatar || '/static/logo.png') : '/static/logo.png'" 
          class="avatar"
          mode="widthFix"
        ></image>
        <view class="user-detail">
          <text class="nickname">{{ displayNickname }}</text>
          <text class="desc">{{ isLogin ? '点击查看个人信息' : '立即登录体验更多功能' }}</text>
        </view>
        <text class="arrow">›</text>
      </view>
      
      <!-- 功能菜单（仅登录后显示） -->
      <view class="menu-list" v-if="isLogin">
        <view class="menu-item" @click="goToSetting">
          <text class="menu-text">设置</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToWardrobe">
          <text class="menu-text">我的衣柜</text>
          <text class="arrow">›</text>
        </view>
      </view>
      
      <!-- 未登录提示 -->
      <view class="login-tip" v-if="!isLogin">
        <text class="tip-text">登录后可以管理个人衣柜和查看信息</text>
      </view>
      
      <!-- 登录/退出按钮 -->
      <view class="button-container">
        <button 
          class="logout-btn" 
          v-if="isLogin" 
          @click="handleLogout"
          :loading="isLoading"
        >
          退出登录
        </button>
        <button 
          class="login-btn" 
          v-else 
          @click="goToLogin"
        >
          登录/注册
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}, // 用户信息（登录后从本地存储或接口获取）
      isLogin: false, // 登录状态（基于手机号判断）
      isLoading: false // 加载状态
    }
  },
  
  computed: {
    // 计算显示的用户名（优先级：昵称 > 手机号 > 默认文本）
    displayNickname() {
      if (this.isLogin) {
        return this.userInfo.nickname || this.userInfo.phone || '用户';
      }
      return '请登录';
    }
  },
  
  // 页面加载时初始化
  onLoad() {
    console.log('my页面加载，初始化登录状态');
    this.syncUserInfoFromStorage(); // 从本地存储同步信息
  },
  
  // 页面每次显示时刷新（关键：登录后跳转回来会触发）
  onShow() {
    console.log('my页面显示，开始刷新数据');
    this.syncUserInfoFromStorage(); // 同步本地存储的最新信息
    
    // 已登录且有用户ID时调用接口获取实时数据
    if (this.isLogin && this.userInfo.id) {
      this.fetchLatestUserInfo();
    }
  },
  
  methods: {
    // 从本地存储同步用户信息（登录后已更新存储）
    syncUserInfoFromStorage() {
      try {
        const storedUser = uni.getStorageSync('userInfo') || {};
        this.userInfo = storedUser;
        this.isLogin = !!storedUser.phone; 
        console.log('从本地存储同步完成，登录状态：', this.isLogin);
      } catch (error) {
        console.error('同步本地存储失败：', error);
        this.isLogin = false;
        this.userInfo = {};
      }
    },
    
    // 调用接口获取最新用户信息（确保数据为后端最新状态）
    async fetchLatestUserInfo() {
      if (!this.userInfo.id) {
        console.warn('用户id不存在，无法获取最新信息');
        this.isLoading = false;
        return;
      }
      this.isLoading = true;
      try {
        // 直接在URL中拼接id参数，避免uni.$http对params的特殊处理导致参数嵌套
        const res = await uni.$http.get(`/user/info?id=${this.userInfo.id}`);
        
        // 打印实际请求地址（方便调试）
        console.log('实际请求地址：', `/user/info?id=${this.userInfo.id}`);
        
        if (res.statusCode === 200 && res.data.code === 200) {
          this.userInfo = res.data.data;
          uni.setStorageSync('userInfo', res.data.data);
          console.log('用户信息更新成功');
        } else {
          console.warn('获取信息失败，用本地缓存');
        }
      } catch (err) {
        console.error('接口请求失败：', err);
      } finally {
        this.isLoading = false;
      }
    },

    
    // 用户信息栏点击事件（登录后跳个人信息，未登录跳登录页）
    handleUserInfoClick() {
      if (this.isLogin) {
        this.goToPersonalInfo();
      } else {
        this.goToLogin();
      }
    },
    
    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({
        url: '/my_pages/login' // 对应登录页路径（子包路径正确）
      });
    },
    
    // 跳转到个人信息页
    goToPersonalInfo() {
      uni.navigateTo({
        url: '/my_pages/personalInfo'
      });
    },
    
    // 跳转到设置页
    goToSetting() {
      uni.navigateTo({
        url: '/my_pages/setting/setting'
      });
    },
    
    // 跳转到我的衣柜
    goToWardrobe() {
      uni.navigateTo({
        url: '/my_pages/wardrobe'
      });
    },
    
    // 退出登录
    async handleLogout() {
      // 先判断id是否存在
      if (!this.userInfo.id) {
        uni.showToast({ title: '用户状态异常', icon: 'none' });
        this.performLocalLogout();
        return;
      }
      
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: async (res) => {
          if (res.confirm) {
            this.isLoading = true;
            try {
              // 直接在URL中拼接id参数（后端@RequestParam需要此格式）
              const response = await uni.$http.post(`/user/logout?id=${this.userInfo.id}`);
              
              if (response.statusCode === 200 && response.data.code === 200) {
                console.log('后端退出成功');
                uni.showToast({ title: '退出成功', icon: 'none' });
              } else {
                console.warn('后端退出失败：', response.response.data.msg || '服务器后端处理失败');
                uni.showToast({ title: '退出失败', icon: 'none' });
              }
            } catch (err) {
              console.error('退出接口请求失败：', err);
              uni.showToast({ title: '网络异常', icon: 'none' });
            } finally {
              this.performLocalLogout();
            }
          }
        }
      });
    },
    
    
    // 执行本地退出（清除存储并重置状态）
    performLocalLogout() {
      // 清除本地存储的用户信息
      uni.removeStorageSync('userInfo');
      uni.removeStorageSync('token'); // 如有token也清除
      
      // 重置页面状态
      this.userInfo = {};
      this.isLogin = false;
      this.isLoading = false;
      
      // 显示退出成功提示
      uni.showToast({
        title: '退出成功',
        icon: 'none',
        duration: 1500
      });
      
      console.log('本地退出完成，当前登录状态：', this.isLogin);
    }
  }
}
</script>

<style scoped>
/* 背景容器样式 */
.container {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

/* 内容容器（半透明背景增强可读性） */
.my-container {
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20rpx 0 100rpx 0;
}

/* 用户信息栏样式 */
.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.95);
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 头像样式 */
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  border: 2rpx solid #f0f0f0;
  background-color: #f8f8f8;
}

/* 用户详情文字 */
.user-detail {
  flex: 1;
}

.nickname {
  font-size: 36rpx;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
  font-weight: 600;
}

.desc {
  font-size: 26rpx;
  color: #666;
}

/* 箭头图标 */
.arrow {
  font-size: 40rpx;
  color: #999;
  margin-left: 20rpx;
}

/* 功能菜单样式（仅登录后显示） */
.menu-list {
  background-color: rgba(255, 255, 255, 0.95);
  margin: 30rpx 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

/* 点击反馈 */
.menu-item:active {
  background-color: #f8f8f8;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
  flex: 1;
}

/* 未登录提示 */
.login-tip {
  padding: 30rpx;
  text-align: center;
  margin: 40rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
}

.tip-text {
  font-size: 28rpx;
  color: #666;
}

/* 按钮容器 */
.button-container {
  padding: 0 30rpx;
  margin-top: 50rpx;
}
</style>
